<template>
	<view>
		<!-- 日历 -->
		<view style="border-radius: 16px;">
			<uni-calendar :insert="true" :start-date="'2018-3-2'" :end-date="'2029-5-20'" @change="change"
				:selected="selected" />
		</view>
		<!-- 列表 -->
		<view style="margin-top: 40rpx;margin-bottom: 180rpx;">
			<view class="listItem" v-for="item in list" :style="{height: item.status==1||item.status==2?'216rpx':'170rpx'}">
				<view class="barOrange" v-if="item.status==1"></view>
				<view class="barBlue" v-else-if="item.status==2"></view>

				<text class="time">{{item.time}}</text>

				<view v-if="item.status==1" class="describe" style="color: #FE8D1B;">缺勤</view>
				<view v-else-if="item.status==2" class="describe" style="color: #2674FF;">迟到</view>
				<view v-else-if="item.status==3" class="describe" style="color: #999999;">已请假</view>

				<view class="title">
					<text class="subtitle">常规</text>
					<text class="maintitle">【教务处】思想动态观察岗</text>
				</view>
				<text class="info" v-if="item.status==1||item.status==2">{{item.intro}}</text>
			</view>
		</view>
		<view class="bottomBtn" @click="toPage('leave')">
			<u-button type="primary" class="btn">请假</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selected: [{
					date: '2022-02-26',
					info: '',
					data: {
						custom: '自定义信息',
						name: '自定义消息头'
					}
				}],
				list: [{
						time: '13:30-16:00',
						name: '思想动态观察岗',
						intro: '13:30-16:00缺勤',
						status: 1,
					},
					{
						time: '13:30-16:10',
						name: '思想动态观察岗1',
						intro: '16:30（已打卡）-18:00（系统签退）',
						status: 2,
					},
					{
						time: '13:30-16:10',
						name: '思想动态观察岗1',
						intro: '16:30（已打卡）-18:00（系统签退）',
						status: 3,
					},
				]
			}
		},
		methods: {
			change() {

			},
			toPage(url){
				uni.navigateTo({
					url:url
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #FAFAFA;
	}

	.listItem {
		width: 91%;
		
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-left: 32rpx;
		margin-bottom: 16rpx;
		position: relative;
		padding: 34rpx 32rpx 28rpx 32rpx;

		.barOrange {
			width: 292rpx;
			height: 48rpx;
			background: linear-gradient(270deg, rgba(226, 244, 236, 0) 0%, #FFDDBB 100%);
			position: absolute;
			top: 32rpx;
			left: 0;
			z-index: 0;
		}

		.barBlue {
			width: 292rpx;
			height: 48rpx;
			background: linear-gradient(270deg, rgba(226, 244, 236, 0) 0%, #BBE3FF 100%);
			position: absolute;
			top: 32rpx;
			left: 0;
			z-index: 0;
		}

		.time {
			position: absolute;
			z-index: 1;
			color: #1A201D;
			font-size: 36rpx;
			font-weight: bold;
		}

		.title {
			margin-top: 68rpx;
			.subtitle {
				font-size: 20rpx;
				color: #FFFFFF;
				border-radius: 16rpx 0px 16rpx 0px;
				background: #EF6850;
				padding: 2rpx 8rpx;
			}

			.maintitle {
				font-weight: 400;
				font-size: 28rpx;
				color: #1A201D;
			}
		}
		.info{
			font-size: 24rpx;
			font-weight: 400;
			color: #8D9893;
			margin-top: 14rpx;
		}
		.describe {
			position: absolute;
			right: 32rpx;
			top: 40rpx;

			font-size: 24rpx;
		}
	}
	// 底部按钮
	.bottomBtn{
		width: 100%;
		height: 148rpx;
		background: #FFFFFF;
		display: block;
		position: fixed;
		bottom: 0;
		z-index: 2;
		box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.05);
		.btn{
			width: 686rpx;
			height: 100rpx;
			background: #2674FF;
			border-radius: 8rpx;
			margin-top: 24rpx;
		}
	}
</style>
